<template>
     <!-- #ifdef MP-WEIXIN  -->
    <view class="global-nav-bar"
        :style="{ position: position, color: color, paddingTop: statusBarHeight+ 'px', backgroundColor: backgroundColor }">

        <view :class="['left-icon', type == 'black' ? 'white' : '']" :style="{width:navWidth+'px' ,height:navHeight-2+'px',top:(statusHeight)+'px'}">
            <view class="ico" @click="back" v-if="isLeftBackShow" >
                <image v-if="type == 'white'" src="@/static/images/index/back_white.png"></image>
                <image v-else src="@/static/images/index/back_black.png"></image>
            </view>
            <view class="line" :style=" type =='black' ? 'background:rgba(0,0,0,0.10);' : ''"></view>
            <view class="ico" @click="goHome">
                <image v-if="type == 'white'" src="@/static/images/index/home_white.png"></image>
                <image v-else src="@/static/images/index/home_black.png"></image>
            </view>
        </view>
        <view class="txt"> {{ title }}</view>

    </view>
    <!-- #endif -->
</template>
<script> 
// #ifdef MP-WEIXIN  
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
const res = wx.getMenuButtonBoundingClientRect() || {};
// 胶囊距离顶部
const statusHeight = res.top; 
// 胶囊高度
const navHeight = res.height; 
// 胶囊高度
const navWidth = res.width; 
// #endif
// import uniIcons from '../uni-icons/uni-icons.vue';
export default {
	// components: { uniIcons },
	props: {
		type: {
			type: String,
			// 'white' 'black'
			default: 'white'
		},
		position: {
			type: String,
			// 'fixed'
			default: 'sticky'
		},
		title: {
			type: String,
			default: '#ffffff'

		},
		backgroundColor: {
			type: String,
			default: '#2C2C2C'
		},
		color: {
			type: String,
			default: '#ffffff'
		},
		// 点击左上角返回按钮是否返回上一页,默认true
		isLeftBack:{
			type:Boolean,
			default:true
		},
		// 显示隐藏左上角返回
		isLeftBackShow:{
			type:Boolean,
			default:true
		},
	},
	data() {
		return {
			// #ifdef MP-WEIXIN  
			statusBarHeight: statusBarHeight,
			statusHeight:statusHeight,
			navHeight:navHeight,
			navWidth:navWidth
			// #endif
		};
	},
	mounted() {
		// #ifdef MP-WEIXIN  
		// eslint-disable-next-line
		this.$emit('setHeight', uni.getSystemInfoSync().statusBarHeight + 44);
		// #endif
	},
	methods: {
		goHome() {
			uni.reLaunch({
				url: '/pages/home/index'
			});
		},
		back() {
			if (!this.isLeftBack) {
				// eslint-disable-next-line
				this.$emit('clickLeft');
			} else {
				console.log('back',this.isLeftBack);
				uni.navigateBack({fail(err) {
					console.log(err);
				}});
			}
		}

	}
};
</script>
<style scoped lang="scss">
.global-nav-bar {
    width: 750rpx;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    top: 0;
    left: 0;
    z-index: 99;

    // position: sticky;
    .txt {
        height: 44px;
        width: 42%;
        line-height: 46px;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis; 
    }

    .left-icon {

        // height: 44px;
        position: absolute;
        left: 20rpx;  
        display: flex;
        align-items: center;
        width: 174rpx;
        height: 58rpx;
        background: rgba(0, 0, 0, 0.15);
        border: 1rpx solid rgba(255, 255, 255, 0.25);
        border-radius: 2rem;
        display: flex;
        align-items: center;

        .ico {
            height: 62rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;

            image {
                width: 40rpx;
                height: 40rpx;
            }
        }

        .line {
            width: 1rpx;
            height: 36rpx;
            background-color: rgba(255, 255, 255, 0.25);;
        }
    }

    .white {
        background: rgba(255, 255, 255, 0.60);
        border: 1rpx solid rgba(151, 151, 151, 0.20);
    }
}
</style>